<template>
  <view class="choose-address-content">
    <nav-bar title="选择位置" />
    <view class="search-view flex-align-center">
      <u-search
        height="80rpx"
        bgColor="#fff"
        search-icon-color="#888888"
        placeholder-color="#888888"
        borderColor="rgba(34, 34, 34, .14)"
        placeholder="请输入地址"
        v-model="keyword.value"
        :showAction="false"
        @input="handleSearchNearbyKeys"
      ></u-search>
      <view
        style="padding-left: 10rpx"
        :style="{ color: themeColor }"
        @click="handleSearchNearbyKeys"
        >确定</view
      >
    </view>
    <view class="map-view">
      <!--      <cover-view class="self-point"> </cover-view>-->
      <map
        class="map"
        :show-location="false"
        @tap="handleUpdateMap"
        :markers="covers"
        show-location
        :latitude="currentLocationParams.latitude"
        :longitude="currentLocationParams.longitude"
      ></map>
      <view class="map-view-my-location" @click="handleSelfLocation">
        <image :src="require('../../images/location.png')" class="" />
      </view>
    </view>
    <view class="tabs-view">
      <u-tabs
        :current="tabsCurrent"
        :list="tabs"
        @click="handleClickTabs"
        :lineColor="themeColor"
        :activeStyle="tabsActiveStyle"
      ></u-tabs>
    </view>
    <block>
      <nearby-list
        v-if="tabsCurrent === 0"
        ref="nearbyListRef"
        :currentId="nearbyId"
        @update:currentId="nearbyId = $event"
        @update:region="keyword.region = $event"
        @handleUpdateCurrentId="handleUpdateCurrentId"
        @handleSetCover="handleSetCover"
        :params="currentLocationParams"
      />
      <my-ship-address
        ref="myShipAddressRef"
        v-else-if="tabsCurrent === 1"
        :tableData="myShipAddressList"
        :currentId="nearbyId"
        @handleUpdateCurrentId="handleUpdateCurrentId"
        @update:currentId="nearbyId = $event"
        @handleSetCover="handleSetCover"
      />
    </block>
    <modal
      :content="modalInfo.content"
      :rightBtnText="modalInfo.rightBtnText"
      :left-btn-text="modalInfo.leftBtnText"
      @confirm="handleOpenSetting"
      @cancel="modalVisible = false"
      :showTitle="false"
      :visible.sync="modalVisible"
    />
    <view
      class="add-address"
      :style="{ 'background-color': themeColor }"
      v-if="tabsCurrent === 1"
      @click="handleToAddEditAddress"
    >
      新增收货地址
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
import nearbyList from "./components/nearby-list";
import myShipAddress from "./components/my-ship-address";
export default {
  components: {
    nearbyList,
    myShipAddress,
  },
  data() {
    return {
      tabs: [
        {
          name: "附近地址",
        },
        {
          name: "我的收货地址",
        },
      ],
      tabsCurrent: 0,
      keyword: {
        value: "",
        region: "中国",
        policy: 0,
      },
      currentLocationParams: {
        page_size: 10,
        page_index: 1,
        latitude: 39.908823,
        longitude: 116.39747,
      },
      covers: [],
      nearbyId: 0,
      myShipAddressList: [],
      modalInfo: {
        content: "提示",
        rightBtnText: "确定",
      },
      modalVisible: false,
    };
  },
  computed: {
    ...mapState("sp-address/location", ["currentLocation"]),
    ...mapState("sp-common/base", ["themeColor"]),
    tabsActiveStyle({ themeColor }) {
      return {
        color: themeColor,
      };
    },
  },
  watch: {
    // currentLocation: {
    //   handler(val) {
    //     if (val) {
    //       this.currentLocationParams.latitude = this.currentLocation.latitude;
    //       this.currentLocationParams.longitude = this.currentLocation.longitude;
    //       this.$nextTick(() => {
    //         this.$refs?.nearbyListRef.handleGetNearbyLocation(true);
    //         this.$refs?.nearbyListRef.handleSearchNearbyList(true);
    //       });
    //     }
    //   },
    //   deep: true,
    // },
  },
  onShow() {
    this.modalVisible = false;
    this.$refs?.myShipAddressRef?.innit();
    //初始化操作
    if (this.currentLocation?.latitude && this.currentLocation?.longitude) {
      this.currentLocationParams.latitude = this.currentLocation.latitude;
      this.currentLocationParams.longitude = this.currentLocation.longitude;
    }
  },
  onLoad() {},
  methods: {
    handleSearchNearbyKeys(isClear = false) {
      const currentLocationParams = Object.assign(
        {},
        this.currentLocationParams
      );
      currentLocationParams.keyword = this.keyword;
      this.currentLocationParams = currentLocationParams;
      this.$nextTick(() => {
        this.$refs?.nearbyListRef?.handleSearchNearbyKeys(
          isClear,
          this.keyword
        );
      });
    },
    handleSetCover(address) {
      this.covers.splice(0, 1);
      this.covers.push(address);
    },
    handleClickTabs(e) {
      this.tabsCurrent = e.index;
    },
    // ---- 附近地址  start ----
    handleUpdateCurrentId(item) {
      if (item) {
        this.currentLocationParams.latitude = item.location.lat;
        this.currentLocationParams.longitude = item.location.lng;
        this.nearbyId = item.id;
        this.$nextTick(() => {
          const params = {
            latitude: item?.location?.lat,
            longitude: item?.location?.lng,
            address: item.address,
            title: item.title,
            distance: item._distance,
          };
          console.log("保存的手动定位", params, item);
          this.$store.dispatch(
            "sp-address/location/setCurrentLocation",
            params
          );
          // this.$refs?.nearbyListRef?.handleGetNearbyLocation(false);
        });
      }
    },
    handleUpdateMap(event) {
      const { latitude, longitude } = event?.detail;
      this.currentLocationParams.latitude = latitude;
      this.currentLocationParams.longitude = longitude;
      this.$nextTick(() => {
        this.$refs?.nearbyListRef?.handleGetNearbyLocation(true);
        this.$refs?.nearbyListRef?.handleSearchNearbyList(true);
      });
    },
    handleSelfLocation() {
      uni.getLocation({
        isHighAccuracy: true,
        type: "gcj02",
        success: (res) => {
          console.log("位置信息", res);
          if (res?.errMsg === "getLocation:ok") {
            const location = res;
            this.currentLocationParams.latitude = location.latitude;
            this.currentLocationParams.longitude = location.longitude;
            this.$nextTick(() => {
              this.$refs?.nearbyListRef?.handleGetNearbyLocation(true);
              this.$refs?.nearbyListRef?.handleSearchNearbyList(true);
            });
            return;
          }
          this.modalInfo = {
            content: "定位权限未开启，请点击【去设置】并手动允许",
            rightBtnText: "去设置",
            leftBtnText: "我知道了",
            type: "userLocation",
          };
          this.$nextTick(() => {
            this.modalVisible = true;
          });
        },
        fail: () => {
          this.modalInfo = {
            content: "定位权限未开启，请点击【去设置】并手动允许",
            rightBtnText: "去设置",
            leftBtnText: "我知道了",
            type: "userLocation",
          };
          this.$nextTick(() => {
            this.modalVisible = true;
          });
        },
      });
    },
    handleOpenSetting() {
      if (this.modalInfo.type === "userLocation") {
        uni.openSetting();
      }
    },
    handleToAddEditAddress() {
      this.$Router.push({
        name: "myEditAddress",
        params: {
          type: "add",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.u-tabs {
  justify-content: center;
}
.u-search {
  height: 80rpx;
}
.choose-address-content {
  height: 100vh;
  overflow: hidden;
  font-family: PingFang SC;
  .search-view {
    padding: 0 24rpx;
    margin-bottom: 24rpx;
  }
  .map-view {
    width: 100vw;
    height: 537rpx;
    position: relative;
    .map {
      width: 100%;
      height: 100%;
    }
    &-my-location {
      position: absolute;
      width: 72rpx;
      height: 72rpx;
      border-radius: 18rpx;
      background-color: rgba($color: #fff, $alpha: 0.8);
      bottom: 66rpx;
      right: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 80%;
        height: 80%;
      }
    }
  }
  .tabs-view {
    height: 108rpx;
  }
}
.add-address {
  position: fixed;
  width: 100vw;
  background-color: $u-primary;
  bottom: env(safe-area-inset-bottom);
  height: 98rpx;
  text-align: center;
  color: white;
  line-height: 98rpx;
}
</style>
